<template>
	<view class="content">

    <view>
      <img style="width: 100%" src="https://hyxs.ychlkj.cn/uploads/20240111/1cc08c4fbfc88bb3de4d23f3e60d8862.png">
    </view>



		<view class="classiftTOP">
      <view style="width: 100%;padding-left: 20px">
        <view class="top-search">
          <img alt="" style="width: 20px;height: 20px;margin-right: 10px" src="https://hyxs.ychlkj.cn/uploads/20240110/5c6ee4ed371fc70d76f80dd99f50eab7.png">
          <test class="text">搜索</test>
        </view>
      </view>
			<view class="classiftTOPl" style="margin-top: 30px">
				<view style="color: #777777" @click="toGender(1)" :class="active ==1? 'classiftBut':'' " class="classiftTOPln ">男生</view>
				<view style="color: #777777" @click="toGender(2)"  :class="active ==2? 'classiftBut':'' " class="classiftTOPlv">女生</view>
				<view style="color: #777777" @click="toGender(3)"  :class="active ==3? 'classiftBut':'' " class="classiftTOPlv">短剧</view>
			</view>

<!--				<view @click="tosousuo" >-->
<!--					<image  style="width: 50rpx; height: 50rpx; margin-right: 30rpx;" src="../../static/sou.png"></image>-->
<!--				</view>-->
				<!-- <img :src="srca" class="classiftTOPri" /> -->
		</view>
		<view class="classiftBtt" id="asa">
			<view class="classiftBttL">
				<view class="classiftBttLtit" v-for="(topical, index) in dataList"
				 :key="index" @click="totopical(topical,index)" :class="{ classiftBttLtitO: index == indexList}">
					{{ topical.name }}
				</view>
			</view>
			<view class="classiftBttR">
				<view class="classiftBttRTop" />
				 <view class="classiftC" >
					<!-- <view class="classiftCT" :id="categories.id">
						{{ categories.name }}
					</view> -->
					<!-- <scroll-view class="scroll-view_H stickyScroll" scroll-x="true">
						<view class="scroll-view-item_H" v-for="(categoriesItems, index) in categories.items" :key="index" :class="{ 'scroll-view-item_HO': index == '0' }">
							{{ categoriesItems.name }}123
						</view>
					</scroll-view> -->

					<view class="classiftCC"  >
						<!--  :id="categoriesName.id" -->
						<view class="classiftCT">
							{{ child[indexList].name }}
						</view>
						<view class="classiftCCI" >
							<view class="classiftCCIft" v-for="(categoriesNameItems, index) in child[indexList].threeList" @click="toLORtapr(categoriesNameItems)" :key="index">
								{{ categoriesNameItems.name }}
							</view>
						</view>
						<!-- <view class="classiftCCI" >
							<view class="classiftCCIift" v-for="(categoriesNameItemss, index) in categoriesName.items" :key="index">
								<view class="classiftCCIiftL"><img :src="categoriesNameItemss.icon" class="classiftCCIiftLi" /></view>
								<view class="classiftCCIiftR">{{ categoriesNameItemss.name }}</view>
							</view>
						</view> -->
					</view>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
// status
// * 状态 1 items内上滚动播放
// * 状态 2 items内图片加分类
// * 状态 3 items内直接分类
// * 状态 4 items内没有东西
import {getIndexCateList}from '@/http/api.js'
import allCategories from '@/assets/json/classify/allCategories.json';
export default {
	data() {
		return {
			dataList:[],
			child:[],
			indexList:0,
			active:1,
			srca: require('static/images/home/search.png'),
			allCategories: allCategories
		};
	},
	onLoad() {
		this.IndexCateList()
	},
	onReady() {
		this.$nextTick(function() {});
		setTimeout(() => {
			let query = uni.createSelectorQuery().in(this);
			console.log(query);
			query
				.select('#asa')
				.boundingClientRect(data => {
					console.log(data);
				})
				.exec();
		}, 1000);
	},
	methods: {
		// 搜索
		tosousuo(){
		uni.navigateTo({
			url: '/pages/search/search'
		});
		},
		// 查看更多
		toLORtapr(title){
			console.log(title);
			uni.navigateTo({
				  url: '/pages/home/home_details/home_details?id=' + title.id + '&name=' + title.name
			});
		},
		toGender(i){
			this.active = i
			this.IndexCateList()
			console.log(i,"性别 gender");
		},
		// 点击切换
		totopical(topical,index){
			this.indexList=index
			console.log(topical,index," 点击切换");
		},
		// 分类接口
		IndexCateList(){
			let data = {
				"like":this.active,
			}
		getIndexCateList(data).then((res)=>{

      console.log("aa",res.data[0].child)
			this.dataList =res.data[0].child
			this.child = res.data[0].child;
			// console.log(res[1].data.data[0].child,"分类");
		})
		},
		getNodesInfo() {
			const query = uni.createSelectorQuery().in(this);
			query
				.selectAll('.productTitle')
				.boundingClientRect()
				.exec(res => {
					console.log(res);
					let nodes = res[0];
					let arr = [];
					nodes.map(item => {
						arr.push(item.top);
					});
					this.topList = arr;
					console.log(this.topList);
				});
		}
	},
	onPageScroll(e) {
		console.log(e.scrollTop);
	}
};
</script>

<style lang="less">
.content {
	position: relative;
	background-color: #FAF9F9;
  min-height: 100vh;
  max-height: 100%;
}
.classiftTOP {
	//display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 100vw;
	height: 25vw;
	box-sizing: border-box;
	//background-color: #fafafa;
	padding-bottom: 5vw;
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 1000;
	.classiftTOPl {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 60vw;
		font-size: 14px;
		color: #999999;
		.classiftTOPln {
			//margin-left: 5vw;
      //margin-right: 5vw;
		}
		.classiftBut {
			font-size: 22px;
			color: #000000 !important;
			font-weight: bold;
		}
	}
	.classiftTOPr {
		width: 20px;
		height: 20px;
		margin-right: 5vw;
		.classiftTOPri {
			width: 20px;
			height: 20px;
		}
	}
}
.classiftBtt {
	display: flex;
	justify-content: space-between;
	//background-color: #fafafa;
	font-size: 14px;
	margin-top: -10vh;
	.classiftBttL {
		width: 25vw;
		text-align: center;
		font-size: 14px;
		margin-top: 3vw;
		//position: fixed;

    background: #f4f3f3;
		top: 25vw;
		left: 0;
		.classiftBttLtit {
			margin-bottom: 4vw;
			font-size: 16px;
			color: #131313;
      padding: 12px;
			border-left: 4px solid #fafafa;
		}
		.classiftBttLtitO {
			color: #FF2519;
			//border-left: 4px solid #e66f3b;
		}
	}
	.classiftBttR {
		width: 75vw;
		//background-color: #ffffff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 3vw;
		//margin-left: 20vw;
		.classiftC {
			.classiftCT {
				font-size: 14px;
				color: #999999;
				margin-top: 3vw;
        padding-left: 8px;
			}
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				margin-top: 2vw;
				background-color: #ffffff;
			}
			// .stickyScroll {
			// 	position: sticky;
			// 	padding-top: 27vw;
			// 	top: 0;
			// 	z-index: 100;
			// 	padding-bottom: 2vw;
			// }
			.scroll-view-item_H {
				display: inline-block;
				padding: 0.2vw 5vw;
				height: 8vw;
				line-height: 8vw;
				margin-right: 3vw;
				text-align: center;
				font-size: 12px;
				border-radius: 4vw;
				color: #999999;
			}
			.scroll-view-item_HO {
				color: #ffffff;
				background-color: #e66e3c;
			}
			.scroll-view_H::-webkit-scrollbar {
				width: 0px;
				height: 0px;
				background-color: rgba(0, 0, 0, 0);
			}

			.scroll-view_H::-webkit-scrollbar-track {
				-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
				border-radius: 10px;
				background-color: rgba(0, 0, 0, 0);
			}

			.scroll-view_H::-webkit-scrollbar-thumb {
				border-radius: 10px;
				-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
				background-color: rgba(0, 0, 0, 0);
			}
			.classiftCC {
				margin-top: 3vw;
				.classiftCCI {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.classiftCCIft {
						width: 20vw;
						text-align: center;
						height: 8vw;
						line-height: 8vw;
						margin-right: 3vw;
						font-size: 12px;

            border-radius: 4px 4px 4px 4px;
						color: #000000;

            background: #EEEEEE;
						margin-top: 3vw;
					}
					.classiftCCIift {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						background-color: #f7f7f7;
						color: #000000;
						width: 30vw;
						height: 10vw;
						line-height: 10vw;
						margin-right: 3vw;
						font-size: 12px;
						border-radius: 5vw;
						margin-top: 4vw;
						box-sizing: border-box;
						padding-left: 3vw;
						.classiftCCIiftL {
							width: 25px;
							height: 25px;
							border-radius: 50%;
							.classiftCCIiftLi {
								width: 25px;
								height: 25px;
								border-radius: 50%;
							}
						}
						.classiftCCIiftR {
							margin-left: 2vw;
						}
					}
				}
			}
		}
	}
}

.top-search{
  padding: 8px;
  display: flex;
  justify-content: left;
  align-items: center;
  background: rgba(255,255,255,0.7);
  box-shadow: 0px 4px 12px 4px rgba(32,32,32,0.02);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  width:90%;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.04);
}
.top-search .text{
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  line-height: 14px;
}

.icon{
  width: 20px;
  height: 20px;
}
</style>
